<template>
  <div class="layout">
      <header v-if="isShowHeader">
          <button v-if="isShowGoBack" @click="back">《</button>
          我是头部
      </header>
      <main>
          <!-- 图片 -->
          <slot name="main-img"></slot>
          <!-- 表单 -->
          <slot name="main-input"></slot>
          <!-- 登录 按钮 -->
          <slot name="main-btn"></slot>
          <!-- 授权登录 -->
          <slot name="main-auth"></slot>

          <!-- home -->
          <slot name="main-main"></slot>
      </main>
      <footer v-if="isShowFooter">我是底部</footer>
  </div>
</template>

<script>
export default {
    methods: {
        back() {
            console.log('我能返回')
        }
    },
    props: {
        isShowHeader: {
            type: Boolean
        },
        isShowFooter: {
            type: Boolean
        },
        isShowGoBack: {
            type: Boolean,
            default: true
        }
    }
}
</script>

<style lang="scss" soped>
.layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    header {
        line-height: 46px;
        text-align: center;
        height: 46px;
    }
    main {
        flex: 1;
        overflow: auto;
    }
    footer {
        line-height: 46px;
        text-align: center;
        height: 46px;
    }
}
</style>